<template>
	<div v-if="cardPrototype">
		<div class="card-info">
			<!-- 头部 -->
			<div class="app-main-top-box">
				<div class="title">卡详情</div>
				<el-button size="medium" round @click="back">返回</el-button>
			</div>

			<!-- 券信息 -->
			<div class="flexRBC">
				<div>
					<div>
						<span class="card-name">{{ cardPrototype.cardName }}</span>
						&nbsp;&nbsp;
						<span class="card-type app-text-color-primary">{{ cardTypeOptions[cardPrototype.cardType] }}</span>
					</div>
					<div class="card-id">批次号：{{ cardPrototype.id }}</div>
				</div>
				<div v-if="!$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')">
					<!--          <el-button-->
					<!--            v-if="cardPrototype.status==1&&!cardPrototype.channelSync&&['cash_wx_busi','discount_wx_busi','cash_wx_pay'].includes(cardPrototype.couponType)"-->
					<!--            size="small"-->
					<!--            type="primary"-->
					<!--            round-->
					<!--            @click="syncCouponChannel(cardPrototype.id)">同步券渠道-->
					<!--          </el-button>-->
					<el-button v-if="cardPrototype.status == 1" size="small" type="primary" round @click="changeStatus(1)">启用</el-button>
					<el-button v-if="cardPrototype.status == 1" type="info" size="small" round @click="editCard(cardPrototype.id)">修改配置</el-button>
					<el-button v-if="cardPrototype.status == 2" size="small" type="warning" round @click="changeStatus(2)">暂停活动</el-button>
					<el-button v-if="cardPrototype.status == 3" size="small" round type="primary" @click="changeStatus(4)">重启活动</el-button>
					<el-button v-if="cardPrototype.status == 2 || cardPrototype.status == 3" size="small" round type="danger" @click="changeStatus(3)">终止活动</el-button>
					<el-button v-if="cardPrototype.status == 1" size="small" round type="danger" @click="changeStatus(3)">删除</el-button>
				</div>
			</div>

			<!-- tab -->
			<div class="tab">
				<el-tabs v-model="tabName">
					<el-tab-pane label="详情" name="detail" />
					<el-tab-pane v-if="!$store.getters.banBtnList.includes('TAB_MCH_COUPON_PUT_ON_DATA')" label="发放数据" name="issue" />
					<el-tab-pane v-if="!$store.getters.banBtnList.includes('TAB_MCH_COUPON_CONSUME_DATA')" label="核销数据" name="verify" />
				</el-tabs>
			</div>
		</div>

		<div v-if="cardPrototype">
			<CardDetail v-if="tabName === 'detail'" :card-prototype="cardPrototype" />
			<IssueRecord v-if="tabName === 'issue'" :card-prototype="cardPrototype" />
			<VerifyRecord v-if="tabName === 'verify'" :card-prototype="cardPrototype" />
		</div>
	</div>
</template>

<script>
import CardDetail from './CardDetail';
import IssueRecord from './IssueRecord';
import VerifyRecord from './VerifyRecord';
import { mapGetters } from 'vuex';
import { cardStatus, cardDetail, statusCard, deleteDraft } from '../../../api/card';

export default {
	components: {
		CardDetail,
		IssueRecord,
		VerifyRecord
	},
	data() {
		return {
			// 配置
			cardTypeOptions: {
				times: '次卡',
				gift: '礼品卡'
			},
			resolve: null,
			reject: null,
			// 状态
			loading: false,
			// 数据
			tabName: 'detail',
			cardPrototype: null
		};
	},
	computed: {
		...mapGetters(['fileBaseUrl'])
	},
	activated() {},
	mounted() {},
	methods: {
		/**
		 * 获取数据
		 */
		// 获取
		show(row) {
			this.cardPrototype = row;
			return new Promise((resolve, reject) => {
				this.resolve = resolve;
				this.reject = reject;
			});
		},

		/**
		 * 按钮组
		 */
		// 返回
		back() {
			this.resolve && this.resolve();
		},

		// 改变状态后的详情
		cardDetailFun() {
			cardDetail({ cardId: this.cardPrototype.id }).then(res => {
				let { status } = res.data.prototype;
				this.cardPrototype.status = status;
			});
		},

		// 改变状态
		changeStatus(status) {
			if (status === 1) {
				let confirmText = ['是否启用当前卡？', '注：启用后可在商户后台发放给用户'];
				const newDatas = [];
				const h = this.$createElement; //先用$createElement创建h函数。
				for (const i in confirmText) {
					newDatas.push(h('p', confirmText[i]));
				}
				this.$confirm('提示', {
					title: '提示',
					message: h('div', null, newDatas),
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning'
				})
					.then(() => {
						this.statusCardFun(status);
					})
					.catch(() => {});
				return;
			} else if (status === 2) {
				let confirmText = ['是否暂停当前卡？', '注：暂停后不影响已发放的卡，但是不能继续给用户发放，启用后可继续发放'];
				const newDatas = [];
				const h = this.$createElement; //先用$createElement创建h函数。
				for (const i in confirmText) {
					newDatas.push(h('p', confirmText[i]));
				}
				this.$confirm('提示', {
					title: '提示',
					message: h('div', null, newDatas),
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning'
				})
					.then(() => {
						this.statusCardFun(status);
					})
					.catch(() => {});
				return;
			} else if ((this.cardPrototype.status == 2 && status === 3) || (this.cardPrototype.status == 3 && status === 3)) {
				let confirmText = ['是否终止当前卡？', '注：终止后将不可再次启用，并不影响已发放券的使用'];
				const newDatas = [];
				const h = this.$createElement; //先用$createElement创建h函数。
				for (const i in confirmText) {
					newDatas.push(h('p', confirmText[i]));
				}
				this.$confirm('提示', {
					title: '提示',
					message: h('div', null, newDatas),
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning'
				})
					.then(() => {
						this.statusCardFun(status);
					})
					.catch(() => {});
				return;
			} else if (this.cardPrototype.status == 1 && status === 3) {
				let confirmText = ['是否删除当前卡？', '注：删除后不可找回，请谨慎操作。'];
				const newDatas = [];
				const h = this.$createElement; //先用$createElement创建h函数。
				for (const i in confirmText) {
					newDatas.push(h('p', confirmText[i]));
				}
				this.$confirm('提示', {
					title: '提示',
					message: h('div', null, newDatas),
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning'
				})
					.then(() => {
						this.deleteDraftFun();
					})
					.catch(() => {});
				return;
			} else if (status === 4) {
				let confirmText = ['是否启用当前卡？', '注：启用后可在商户后台发放给用户'];
				const newDatas = [];
				const h = this.$createElement; //先用$createElement创建h函数。
				for (const i in confirmText) {
					newDatas.push(h('p', confirmText[i]));
				}
				this.$confirm('提示', {
					title: '提示',
					message: h('div', null, newDatas),
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning'
				})
					.then(() => {
						this.statusCardFun(status);
					})
					.catch(() => {});
				return;
			}
			const statusConfig = {
				1: {
					text: '激活卡后，顾客将可以领取/购买，点击确定按钮立即激活！',
					successMsg: '激活成功',
					status: '2',
					confirmButtonText: '确认激活'
				},
				2: {
					text: '暂停活动后，卡将不会继续发放，直到下一次人工重启活动！',
					successMsg: '暂停成功',
					status: '3',
					confirmButtonText: '确认暂停'
				},
				3: {
					text: '终止活动后，卡将不会继续发放且不可再重启，但是不会影响已经投放的卡！',
					successMsg: '终止成功',
					status: '4',
					confirmButtonText: '确认终止'
				},
				4: {
					text: '重启卡活动后，顾客将可以领取/购买，点击确定按钮立即重启！',
					successMsg: '重启成功',
					status: '2',
					confirmButtonText: '确认重启'
				}
			};
			this.$confirm(statusConfig[status].text, '提示', {
				confirmButtonText: statusConfig[status].confirmButtonText,
				cancelButtonText: '取消',
				type: 'warning',
				center: true,
				roundButton: true
			}).then(() => {
				const params = {
					stockId: this.cardPrototype.id,
					status
				};
				this.loading = true;
				cardStatus(params)
					.then(res => {
						this.$notify({
							title: '成功',
							message: statusConfig[status].successMsg,
							type: 'success',
							duration: 2000,
							offset: 40
						});
						this.cardPrototype.status = statusConfig[status].status;
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false;
					});
			});
		},

		// 卡状态
		statusCardFun(status) {
			let { id } = this.cardPrototype;
			let params = {
				// 操作，1：草稿箱--启用，2：生效中--暂停，3：生效中--终止，4：生效中--启用
				status: status,
				// 批次号
				stockId: id
			};
			statusCard(params).then(res => {
				console.log('请求上下架', res);
				this.$notify({
					title: '成功',
					type: 'success',
					duration: 2000,
					offset: 40
				});
				this.cardDetailFun();
			});
		},
		// 草稿箱删除
		deleteDraftFun() {
			let { id } = this.cardPrototype;
			let params = {
				// 批次号
				id
			};
			deleteDraft(params).then(res => {
				this.$notify({
					title: '成功',
					type: 'success',
					duration: 2000,
					offset: 40
				});
				this.back();
			});
		},

		// 同步渠道
		// syncCouponChannel(couponId) {
		//   this.loading = true
		//   syncWxCoupon({ couponId })
		//     .then((res) => {
		//       this.$alert(res.data, '提示', {
		//         confirmButtonText: '确定',
		//         center: true,
		//         type: 'success',
		//         roundButton: true,
		//         callback: action => {}
		//       })
		//       // this.cardPrototype.channelSync = true
		//     }).finally(() => {
		//       this.loading = false
		//     })
		// },

		// 跳转编辑
		editCard(id) {
			this.$router.push({
				name: 'CardsAndOfferEditCard',
				query: { mode: 'edit', id }
			});
		}

		/**
		 * 状态组
		 */
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.card-info {
	::v-deep {
		.el-tabs__header {
			margin-bottom: 0;
			background-color: #fff;
			border-radius: 0 0 5px 5px;
		}

		.el-tabs__nav-wrap::after {
			background-color: #fff;
		}

		.el-tabs__active-bar {
			height: 4px;
		}

		.el-row {
			flex-wrap: wrap;
		}

		.el-card,
		.el-card__body {
			height: 100%;
		}
	}

	padding: 24px 30px 0;
	border-radius: 5px 5px;
	background-color: #fff;
	margin-bottom: 10px;

	.card {
		&-name {
			font-size: 20px;
			font-weight: bold;
		}

		&-type {
			font-size: 14px;
		}

		&-id {
			margin-top: 10px;
			font-size: 14px;
			color: #909399;
		}
	}
}
</style>
